<template>
    <div class="page">
        <div class="row1">
            <h5 class="title">支出统计</h5>
            <div class="van-hairline--top"></div>
            <div class="headerRow1">
                <van-row class="headerRow1Col1" justify="center">
                    <van-col class="headerRow1Col1Content1">总支出</van-col>
                    <van-col class="headerRow1Col1Content3">{{ card1Data.total }}</van-col>
                </van-row>
                <van-row class="headerRow1Col2" justify="center">
                    <van-col class="headerRow1Col2Content1">记账笔数</van-col>
                    <van-col class="headerRow1Col2Content3">{{ card1Data.count }}</van-col>
                </van-row>
            </div>
        </div>
        <div class="row2">
            <h5 class="title">支出分类</h5>
            <div class="van-hairline--top"></div>
            <div id="PieMain" style="width: 100%; height: 200px;"></div>
            <div class="listRow">
                <van-list style="height: 200px; overflow-y: scroll; border-radius: 30px;" v-model:loading="loading"
                    :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-cell class="listCell" v-for="(item, index) in PieData" :key="index">
                        <div class="listCellRow">
                            <div class="content1">
                                <i :class="`iconfont ${item.icon}`" style="font-size: 30px;"></i>
                            </div>
                            <div class="content2">
                                <div class="text">
                                    <div class="name">{{ item.name }}</div>
                                    <div class="percent">{{ item.percent }}%</div>
                                    <div class="billing">({{ item.billing }}笔)</div>
                                </div>
                                <div class="progress">
                                    <van-progress :percentage="item.percent" stroke-width="8"
                                        :show-pivot="show_pivot" />
                                </div>
                            </div>
                            <div class="content3">
                                <div>￥ {{ item.value.toFixed(2) }}</div>
                            </div>
                        </div>
                    </van-cell>
                </van-list>
            </div>
        </div>
        <div class="row3">
            <h5 class="title">支出分类</h5>
            <div class="van-hairline--top"></div>
            <span class="row3Span1">仅展示排行前10笔支出</span>
            <van-list style="max-height: 500px; overflow-y: scroll; border-radius: 30px;" v-model:loading="loading"
                :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell class="listCell" v-for="(item, index) in sortedPieData.slice(0, 10)" :key="index">
                    <div class="listCellRow">
                        <h1>#{{ index + 1 }}</h1>
                        <div class="content1">
                            <i :class="`iconfont ${item.icon}`" style="font-size: 30px;"></i>
                        </div>
                        <div class="content2">
                            <div class="text">
                                <div class="name">{{ item.name }}</div>
                            </div>
                            <div class="date">
                                <span>{{ item.date }}</span>
                            </div>
                        </div>
                        <div class="content3">
                            <div>￥ {{ item.value.toFixed(2) }}</div>
                        </div>
                    </div>
                </van-cell>
            </van-list>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    type TitleComponentOption,
    TooltipComponent,
    type TooltipComponentOption,
    LegendComponent,
    type LegendComponentOption
} from 'echarts/components';
import { PieChart, type PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);

type EChartsOption = echarts.ComposeOption<
    | TitleComponentOption
    | TooltipComponentOption
    | LegendComponentOption
    | PieSeriesOption
>;

// -------------------------------------------------------------------

const PieData = ref([
    {
        value: 3,
        name: '餐饮',
        icon: "icon-canyin",
        billing: 1,
        date: "08-23",
        percent: 0
    },
    {
        value: 50,
        name: '购物',
        icon: "icon-gouwucheman",
        billing: 1,
        date: "08-23",
        percent: 0
    },
])

const sortedPieData = computed(() => {
    return PieData.value.slice().sort((a, b) => b.value - a.value);
});

const card1Data = ref<{ total: string, count: number }>({ total: '0.00', count: 0 });
// 计算总值，保留两位小数，并统计数据项个数 
const calculateTotalAndCount = () => {
    const total = PieData.value.reduce((sum, item) => sum + item.value, 0).toFixed(2);
    const count = PieData.value.length;
    card1Data.value = { total, count };
};

onMounted(() => {
    calculateTotalAndCount();
    const chartDom = document.getElementById('PieMain')!;
    const myChart = echarts.init(chartDom);
    const option: EChartsOption = {
        tooltip: {
            trigger: 'item',

        },
        series: [
            {
                name: '',
                type: 'pie',
                radius: '65%',
                center: ['50%', '50%'],
                data: PieData.value,
                label: {
                    formatter: (params) => {
                        const existingIndex = PieData.value.findIndex(p => p.name === params.name);
                        if (existingIndex !== -1) {
                            PieData.value[existingIndex].percent = params.percent;
                        }
                        return `${params.name}: ${params.value} (${params.percent}%)`;
                    },
                    fontSize: 15
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
});

// -------------------------------------------------------------------

const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (PieData.value.length >= 1) {
            finished.value = true;
        }
    }, 1000);
};

const show_pivot = false
</script>


<style scoped src="@/static/Analysis/Item/page1.scss" />
<style scoped></style>